<template>
  <a-spin :spinning="loading">
    <div class="bg-white">
      <div class="p-20">
        <div class="flex items-center">
          <div class="flex items-center mr-20">
            <span class="flex-none">城市或省份名称：</span>
            <div class="px-10">
              <a-input class="w-300" :max-length="50" v-model="name" placeholder="请输入城市或省份名称" />
            </div>
          </div>

          <div class="flex items-center">
            <span class="flex-none">城市或省份编码：</span>
            <div class="px-10">
              <a-input class="w-300" :max-length="50" v-model="code" placeholder="请输入城市或省份编码" />
            </div>
            <a-button type="primary" class="mx-5" @click="searchHandle">查询</a-button>
            <a-button class="mx-5" @click="resetHandle">重置</a-button>
          </div>
        </div>

        <div class="mt-20" v-if="$permissionJudge('CityCreate')">
          <a-button type="primary" class="mr-5" @click="addCountryHandle">
            <a-icon type="plus" />
            <span>新建</span>
          </a-button>
        </div>

        <div class="mt-20">
          <a-alert class="mb-10" message="城市信息由三级构成，国家-省-市" type="info" show-icon />
        </div>

        <!--列表数据-->
        <div class="mt-20">
          <a-table class="table-con" :columns="columns" :data-source="pageList" :pagination="false">
            <template #set="val, data">
              <a class="" @click="editHandle(data)" v-if="$permissionJudge('CityUpdate')">编辑</a>
              <!--              <a class="text-red-501" @click="delHandle(data)" v-if="$permissionJudge('CityDelete')">删除</a>-->
            </template>
            <template #isOpenCtrip="isOpenCtrip, data">
             <div style="display: flex;align-items: center;justify-content: center;">
				  <a-switch :checked="isOpenCtrip" @change="toggleEnable(data)" />
			 </div>
            </template>
          </a-table>

          <!--底部页码-->
          <div class="flex justify-end mt-20 items-center">
            <div class="pr-20">共{{ rowCount }}条记录，第{{ pageNum }}/{{ Math.ceil(rowCount / rowsNum) }} 页</div>
            <a-pagination
              v-model="pageNum"
              show-size-changer
              show-quick-jumper
              :page-size.sync="rowsNum"
              :total="rowCount"
              @showSizeChange="sizeChange"
              @change="pageChange"
            >
            </a-pagination>
          </div>
        </div>
      </div>
    </div>

    <!--新建或者编辑弹框-->
    <a-modal
      :title="editInfo.id > 0 ? '编辑自有城市信息' : '添加自有城市信息'"
      v-model="isShowCreateEditPop"
      :confirm-loading="createEditLoading"
      @cancel="cancelHandle"
      @ok="confirmHandle"
    >
      <a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" :form="createEditForm">
        <a-form-item label="城市编码">
          <a-input
            placeholder="请输入城市编码"
            :maxLength="8"
            v-decorator="[
              'code',
              { rules: [{ required: true, message: '请输入城市编码', whitespace: true }], initialValue: editInfo.code },
            ]"
          />
        </a-form-item>
        <a-form-item label="城市名称">
          <a-input
            placeholder="请输入城市名称"
            :maxLength="30"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入城市名称', whitespace: true }], initialValue: editInfo.name },
            ]"
          />
        </a-form-item>
        <a-form-item label="省份编码">
          <a-input
            placeholder="请输入省份编码"
            :maxLength="16"
            v-decorator="[
              'provinceCode',
              {
                rules: [{ required: true, message: '请输入省份编码', whitespace: true }],
                initialValue: editInfo.provinceCode,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="省份名称">
          <a-input
            placeholder="请输入省份名称"
            :maxLength="30"
            v-decorator="[
              'provinceName',
              {
                rules: [{ required: true, message: '请输入省份名称', whitespace: true }],
                initialValue: editInfo.provinceName,
              },
            ]"
          />
        </a-form-item>
        <a-form-item label="所属国家">
          <a-select
            v-decorator="[
              'countryCode',
              { rules: [{ required: true, message: '请选择所属国家' }], initialValue: editInfo.countryCode },
            ]"
            placeholder="请选择所属国家"
          >
            <a-select-option :value="item.code" v-for="(item, index) in allCountryListInfo" :key="index">
              {{ item.name }}
            </a-select-option>
          </a-select>
          <a-input type="hidden" v-decorator="['id', { initialValue: editInfo.id }]" />
        </a-form-item>
		<a-form-item label="电话区号">
		  <a-input
		    placeholder="请输入电话区号"
		    :maxLength="16"
		    v-decorator="[
		      'areaCode',
		      {
		        rules: [{ required: true, message: '请输入电话区号', whitespace: true }],
		        initialValue: editInfo.areaCode,
		      },
		    ]"
		  />
		</a-form-item>
        <a-form-item label="是否上线携程">
          <a-switch
            v-decorator="[
              'isOpenCtrip',
              {
                valuePropName: 'checked',
                initialValue: editInfo.isOpenCtrip,
              },
            ]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-spin>
</template>

<script>
import {
  getPageCityList,
  getAllCountryList,
  create,
  deleteInfo,
  edit,
  getCountryInfo,
  getPageCountryList,
  getPageContinentList,
} from '@/api/geography'

export default {
  name: 'CityItem',
  data() {
    return {
      columns: [
        {
          title: '城市编码',
          dataIndex: 'code',
		   align: 'center',
        },
        {
          title: '城市名称',
          dataIndex: 'name',
          width: '15%',
		   align: 'center',
        },
		{
		  title: '电话区号',
		  dataIndex: 'areaCode',
		  // width: '15%',
		   align: 'center',
		},
        {
          title: '省份编码',
          dataIndex: 'provinceCode',
		   align: 'center',
        },
        {
          title: '省份名称',
          dataIndex: 'provinceName',
          width: '15%',
		   align: 'center',
        },
        {
          title: '国家编码',
          dataIndex: 'countryCode',
		   align: 'center',
        },
        {
          title: '国家名称',
          dataIndex: 'countryName',
		     align: 'center',
        },
        { title: '是否上线携程',align: 'center',dataIndex: 'isOpenCtrip', scopedSlots: { customRender: 'isOpenCtrip' } },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'set' },
        },
      ],
      createEditForm: this.$form.createForm(this), // 表单对象
      isShowCreateEditPop: false, // 是否显示添加城市或者编辑城市弹框
      createEditLoading: false, // 弹框加载动画

      allCountryListInfo: [], // 获取所有国家信息
      editInfo: {
        id: 0,
        code: '', // 城市编码 code
        name: '', // 城市名称
        provinceName: '', // 省份名称
        provinceCode: '', // 省份 code
        countryCode: undefined, // 所属国家 code
        isOpenCtrip: undefined, // 是否上线携程
		areaCode:undefined
      },

      loading: true, // 页面是否在加载中
      pageList: [], // 列表总数据
      name: '', // 城市名称
      code: '', // 城市编码
      pageNum: 1, // 页码
      rowsNum: 10, // 每页的数据
      rowCount: 0, // 总页码数据
      enableLoading: false,
    }
  },
  created() {
    this._getPageCityList() // 获取自有城市信息列表
    this._getAllCountryList() // 获取所有国家信息
  },
  methods: {
    _getPageCityList() {
      // 获取自有城市信息列表
      this.loading = true
      getPageCityList({
        name: this.name.trim(),
        code: this.code.trim(),
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
      })
        .then((res) => {
          this.pageList = res.items
          this.rowCount = res.rowCount
        })
        .finally(() => {
          this.loading = false
        })
    },

    _getAllCountryList() {
      // 获取城市信息
      getAllCountryList()
        .then((res) => {
          this.allCountryListInfo = res
        })
        .finally(() => {})
    },

    searchHandle() {
      // 搜索
      this.pageNum = 1
      this._getPageCityList()
    },

    resetHandle() {
      // 重置
      this.name = ''
      this.code = ''
      this._getPageCityList()
    },

    sizeChange(pageNum, rowsNum) {
      // 每页数量变化的时候
      this.pageNum = pageNum
      this.rowsNum = rowsNum
      this._getPageCityList()
    },

    pageChange(pageNum, rowsNum) {
      this.pageNum = pageNum
      this.rowsNum = rowsNum
      this._getPageCityList()
    },

    addCountryHandle() {
      // 添加城市信息
      this.editInfo = {
        id: 0,
        code: '', // 城市编码 code
        name: '', // 城市名称
        provinceName: '', // 省份名称
        provinceCode: '', // 省份 code
        countryCode: '', // 所属国家 code
        isOpenCtrip: '', // 是否上线携程
		areaCode:undefined
      }

      this.createEditForm.setFieldsValue({
        id: 0,
        code: '', // 城市编码 code
        name: '', // 城市名称
        provinceName: '', // 省份名称
        provinceCode: '', // 省份 code
        countryCode: undefined, // 所属国家 code
        isOpenCtrip: '', // 是否上线携程
		areaCode:undefined
      })

      this.isShowCreateEditPop = true
    },

    editHandle(e) {
      // 编辑
      getCountryInfo({ id: e.id }).then((res) => {
        this.editInfo = {
          id: e.id,
          code: res.code, // 城市编码 code
          name: res.name, // 城市名称
          provinceName: res.provinceName, // 省份名称
          provinceCode: res.provinceCode, // 省份 code
          countryCode: res.countryCode, // 所属国家 code
          isOpenCtrip: res.isOpenCtrip, // 是否上线携程
		  areaCode:res.areaCode
        }
        this.createEditForm.setFieldsValue({
          id: e.id,
          code: res.code, // 城市编码 code
          name: res.name, // 城市名称
          provinceName: res.provinceName, // 省份名称
          provinceCode: res.provinceCode, // 省份 code
          countryCode: res.countryCode, // 所属国家 code
          isOpenCtrip: res.isOpenCtrip, // 是否上线携程
		  areaCode:res.areaCode
        })
        this.isShowCreateEditPop = true
      })
    },

    delHandle(e) {
      // 删除操作
      this.$confirm({
        title: '提示',
        content: `确定删除吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          deleteInfo([e.id]).then(() => {
            this.$message.success('删除成功！')
            if (this.pageList.length === 0 && this.pageNum > 1) this.pageNum--
            this._getPageCityList()
          })
        },
      })
    },

    cancelHandle() {
      // 关闭弹框
      this.isShowCreateEditPop = false
    },

    confirmHandle() {
      // 确认弹框
      this.createEditForm.validateFields((err, values) => {
        if (!err) {
          if (!values.isOpenCtrip) {
            values.isOpenCtrip = false
          }
          const confirmFn = values.id > 0 ? edit : create
          confirmFn(this.$utils.trimValue(values)).then(() => {
            this.isShowCreateEditPop = false
            this.$message.success(`${values.id ? '修改' : '新增'}成功！`)
            this._getPageCityList()
          })
        }
      })
    },

    toggleEnable(data) {
      const isOpenCtrip = !data.isOpenCtrip
      getCountryInfo({ id: data.id }).then((res) => {
        res.isOpenCtrip = isOpenCtrip
        res.id = data.id
        edit(res)
          .then((data) => {
            this.$message.success(`${isOpenCtrip ? '上线' : '下线'}成功！`)
            this._getPageCityList()
          })
          .finally(() => (this.enableLoading = false))
      })
    },
  },
}
</script>

<style scoped lang="less">
.table-con {
  /deep/ .ant-table-thead > tr > th,
  /deep/ .ant-table-tbody > tr > td {
    padding: 13px;
  }
}
</style>